// 工作追踪
<template>
  <div class="relative-box padding-20">
    <option-list ref="option"></option-list>
    <el-form label-width="120px" size="small" :model="searchParams">
      <el-row>
        <el-col :span="8">
          <el-form-item label="负责人部门">
            <el-select v-model="searchParams.organizationKey" clearable filterable @change="getManagerList">
              <el-option v-for="item in departmentList" :key="item.primaryKey" :label="item.orgName" :value="item.primaryKey" />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="负责人">
            <el-select v-model="searchParams.processorKey" clearable filterable>
              <el-option v-for="item in personList" :key="item.primaryKey" :label="item.employeeName" :value="item.primaryKey" />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="事件类型">
            <el-select v-model="searchParams.workType" clearable filterable>
              <el-option v-for="item in eventList" :key="item.key" :label="item.value" :value="item.key" />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="事件">
            <el-input placeholder="请输入" v-model="searchParams.likeDescription" clearable></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="开始时间">
            <el-date-picker v-model="searchParams.leCompleteTime" type="date" value-format="timestamp" :picker-options="pickerOptionsStart" clearable placeholder="请选择"></el-date-picker>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="结束时间">
            <el-date-picker v-model="searchParams.geCompleteTime" type="date" value-format="timestamp" :picker-options="pickerOptions" clearable placeholder="请选择"></el-date-picker>
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-button type="primary" size="large" class="f-right" @click="getDataSource('')">查询</el-button>
          <el-button size="large" class="f-right margin-right-10" @click="reset">重置</el-button>
        </el-col>
      </el-row>
    </el-form>

    <section class="search-result-box flex align-center font-size-14 padding-top-20 padding-bottom-20 color-666666">
      <div class="total-num-box margin-right-20 font-size-16">
        共<span class="margin-right-5 margin-left-5 color-3384FE">{{ total }}</span
        >条
      </div>
      <template v-if="is180DayIn">
        <div class="color-999999 margin-right-10">仅显示180天内已办工作</div>
        <div class="color-3384FE" style="cursor: pointer" @click="checkSearch('all')">查看更多 ></div>
      </template>
      <template v-else>
        <div class="color-999999 margin-right-10">全部已办工作</div>
        <div class="color-3384FE" style="cursor: pointer" @click="checkSearch('part')">仅显示180天内已办工作 ></div>
      </template>

      <div class="flex-1 text-align-right">搜索结果</div>
    </section>

    <template v-if="list.length > 0">
      <work-item v-for="item in list" :key="item.primaryKey" class="margin-bottom-20 border-line" @getInfo="getInfo" :canClick="true" :model="item" :isLeader="isLeader" :isShowImg="false"></work-item>
    </template>
    <el-empty class="margin-top-100" v-else description="暂无数据"></el-empty>

    <Pagination v-if="total > list.length" @change="pageChange" :total="total" paginationLayout="total, prev, pager, next" />
    <add-work ref="work" @refresh="refresh" :isLeader="isLeader"></add-work>
    <work-info ref="workInfo" :isLeader="isLeader" @updateWork="updateWork"></work-info>
  </div>
</template>
<script>
  import addWork from './components/addWork.vue';
  import workInfo from './workInfo.vue';
  import workItem from './components/workItem.vue';
  import { apiWorkList, apiOrgList, apiManagerList } from '../../api/workTrace';
  import merge from 'webpack-merge';
  import { apiConstant } from '../../api/common';
  import optionList from './components/optionList';
  import workTrace from '../../mixin/workTrace';

  export default {
    mixins: [workTrace],

    data() {
      return {
        list: [],
        total: 0,
        currentPage: 1,
        pageSize: 10,
        addWorkBtnShow: true,
        systemType:localStorage.getItem('systemType'),
        isLeader: this.systemType == 'assetManagement' || this.systemType == 'businessBuildingOperate' ? true : false,
        // 搜索
        searchParams: {},
        pickerOptions: {
          disabledDate: time => {
            if (this.searchParams.leCompleteTime) {
              return time.getTime() < this.searchParams.leCompleteTime;
            }
          },
        },
        pickerOptionsStart: {
          disabledDate: time => {
            if (this.searchParams.geCompleteTime) {
              return time.getTime() > this.searchParams.geCompleteTime;
            }
          },
        },
        eventList: [],
        departmentList: [],
        personList: [],
        // 是否180天之内
        is180DayIn: true,
        date180Before: null,
      };
    },

    mounted() {
      this.date180Before = new Date(new Date().getTime() - 180 * 24 * 3600 * 1000).getTime();
      this.getConstant();
      this.getOrgList();
      this.hasInfoKeyDo();
    },

    methods: {
      //常量
      async getConstant() {
        let res = await apiConstant();
        this.eventList = res.workType || [];
      },

      //部门数据源
      async getOrgList() {
        let res = await apiOrgList();
        this.departmentList = res.rows || [];
      },

      //工作负责人数据源
      async getManagerList(key) {
        let res = await apiManagerList({
          orgKeys: [key],
        });
        this.personList = res.rows || [];
      },

      //重制查询条件
      reset() {
        for (let i in this.searchParams) {
          this.searchParams[i] = null;
        }

        this.getDataSource('');
      },

      async getDataSource(more) {
        let userInfo = JSON.parse(localStorage.getItem('userInfo'));
        let queryParam = {
          currentPage: more ? this.currentPage : 1,
          pageSize: this.pageSize,
          createOrProcessorKey: userInfo.key,
          labelType: 1, //1-工作追踪 2-项目事件
          isLeader: this.isLeader,
          workTypeList: [3, 4, 5],
          status: 1,
        };
        queryParam = Object.assign(queryParam, this.searchParams);
        // 180天内限制
        if (this.is180DayIn) {
          if (queryParam.startTime) {
            queryParam.startTime = this.date180Before <= queryParam.startTime.getTime() ? queryParam.startTime : new Date(this.date180Before);
          }

          if (queryParam.endTime) {
            queryParam.endTime = this.date180Before <= queryParam.endTime.getTime() ? queryParam.endTime : new Date(this.date180Before);
          }
        }
        let res = await apiWorkList(queryParam);
        res.rows.forEach(item => {
          item.imgList = [];
          item.imageAttachmentList &&
            item.imageAttachmentList.forEach(img => {
              item.imgList.push(img.fileUrl);
            });
        });
        this.list = res.rows || [];
        this.total = res.total || 0;
      },

      //新建工作
      addEvent() {
        this.$refs.work.init();
      },

      //更新工作
      updateWork(model) {
        this.$refs.work.callBackFn(model);
      },

      //详情
      getInfo(key, model) {
        if (model && (model.status == 2 || !model.status)) {
          this.updateWork(model);
        } else {
          this.$refs.workInfo.getDataSource(key);
          this.$refs.workInfo.dialogShow = true;
        }
      },

      //添加编辑工作后刷新 key有值代表是编辑后的
      refresh(key) {
        this.getDataSource('more');
        key && this.$refs.workInfo.getDataSource(key);
      },

      //从首页滚动事件跳转过来
      hasInfoKeyDo() {
        if (this.$route.query.infoKey) {
          this.getInfo(this.$route.query.infoKey);
          this.$router.replace({
            query: merge(this.$route.query, { infoKey: '' }),
          });
        }
      },

      //分页
      pageChange(page) {
        this.currentPage = page.currentPage;
        this.getDataSource('more');
      },
    },

    components: { addWork, workItem, workInfo, optionList },
  };
</script>
<style lang="scss" scoped>
  .btn-box {
    top: -18px;
    right: 10px;
    z-index: 9999999999;
  }
  .tips {
    top: -50px;
    padding: 5px;
    border-radius: 10px;
    background: #ff3535;
    color: #fff;
    z-index: 99;
  }
  .tips-one {
    left: 124px;
  }
  .tips-two {
    left: 204px;
  }
  .tips-three {
    left: 284px;
  }
  .tag-orange-box {
    background: rgba(247, 145, 0, 0.1);
    border-radius: 3px;
    color: #f79100;
  }
  .tag-blue-box {
    background: rgba(51, 132, 254, 0.1);
    border-radius: 3px;
    color: #3384fe;
  }

  .border-line {
    border-bottom: 1px solid #e5e5e5;
  }
  .search-result-box {
    border-top: 1px solid #e5e5e5;
  }
</style>
